<template>
	<!-- 邀请记录 -->
	<view class="InviteLogs-main">
		<view class="InviteLogs-filter">
			<uni-segmented-control
				style="background-color: #fff; height: 90rpx"
				:current="current"
				:values="items"
				active-color="#dd524d"
				@clickItem="onClickItem"
				style-type="text"
			/>
		</view>
		<view class="InviteLogs-list">
			<!-- 邀请记录 -->
			<view v-if="current == 0">
				<view class="" v-if="userInviteList.length > 0">
					<view class="InviteLogs-item" v-for="(item, index) in userInviteList" :key="item.id">
						<view class="InviteLogs-content">
							<view class="InviteLogs-item-left">
								<view class="image">
									<image :src="imageUrls(item.avatar)" style="width: 80rpx; border-radius: 50%; height: 80rpx"></image>
								</view>
								<view class="name">
									{{ item.nickname }}
								</view>
							</view>
							<view class="InviteLogs-item-right">
								{{ formatTimestamps(item.createtime) }}
							</view>
						</view>

						<view class="InviteLogsList" style="border-top: 1px #f3f3f3 solid" v-if="item.invitees.length > 0">
							<view class="InviteLogs-content" v-for="(jitem, jindex) in item.invitees" :key="jitem.id" style="padding-top: 20rpx">
								<view class="InviteLogs-item-left">
									<view class="image">
										<image :src="imageUrls(jitem.avatar)" style="width: 80rpx; border-radius: 50%; height: 80rpx"></image>
									</view>
									<view class="name">
										{{ jitem.nickname }}
									</view>
								</view>
								<view class="InviteLogs-item-right">
									{{ formatTimestamps(jitem.createtime) }}
								</view>
							</view>
						</view>
					</view>
				</view>

				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-else></u-empty>
			</view>

			<!-- 分佣记录 -->
			<view v-if="current == 1">
				<view v-if="userCommissionLogList.length > 0">
					<view class="giveaway-item" v-for="(item, index) in userCommissionLogList" :key="item.id">
						<view class="InviteLogs-item-left">
							<view class="name">{{ item.memo }}</view>
							<view class="des">
								<text style="padding-right: 5px">变更余额：￥{{ formatAmounts(item.before) }}</text>
								<text>目前余额：￥{{ formatAmounts(item.after) }}</text>
							</view>
							<view class="iphone">{{ formatTimestamps(item.createtime) }}</view>
						</view>
						<view class="InviteLogs-item-right" :class="[Number(item.money) > 0 ? 'add' : 'reduction']">
							{{ Number(item.money) > 0 ? '+' + item.money : item.money }}元
						</view>
					</view>
				</view>

				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-else></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
import { userInvite, userCommissionLog } from '../../../api/home/index.js';
import { imageUrl, formatTimestamp, formatAmount } from '../../../utils/tools.js';
export default {
	data() {
		return {
			items: ['邀请记录', '分佣记录'],
			current: 0,
			userInviteList: [],
			userCommissionLogList: [],
			logsQuery: {
				page: 1,
				limit: 10,
				keyword: ''
			}
		};
	},
	onShow() {
		this.getUserInvite();
		this.getuserCommissionLog();
	},
	methods: {
		onClickItem(val) {
			this.current = val.currentIndex;
		},

		// 我的邀请
		async getUserInvite() {
			try {
				const resData = await userInvite();
				this.userInviteList = resData.data.data;
			} catch (e) {
				//TODO handle the exception
				throw Error(e);
			}
		},

		// 流水
		async getuserCommissionLog() {
			try {
				const resData = await userCommissionLog(this.logsQuery);
				this.userCommissionLogList = resData.data.data;
			} catch (e) {
				//TODO handle the exception
				throw Error(e);
			}
		},

		imageUrls(url) {
			return imageUrl(url);
		},

		formatTimestamps(time) {
			return formatTimestamp(time);
		},
		formatAmounts(val) {
			return formatAmount(Number(val));
		}
	}
};
</script>

<style scoped lang="scss">
.InviteLogs-list {
	box-sizing: border-box;
	padding: 20rpx;
	background-color: #f3f3f3;

	.InviteLogs-item {
		background-color: #fff;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 10rpx;

		.InviteLogsList {
			box-sizing: border-box;
			padding-left: 50rpx;
			padding-top: 20rpx;
			margin-top: 20rpx;
		}
	}

	.giveaway-item {
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 10rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		margin-bottom: 20rpx;
		.InviteLogs-item-left {
			.name {
				font-size: 26rpx;
				margin-bottom: 5px;
			}

			.iphone {
				color: #999;
			}
		}

		.InviteLogs-item-right {
			font-size: 12px;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
}

.InviteLogs-content {
	display: flex;
	justify-content: space-between;
	font-size: 26rpx;
	.InviteLogs-item-left {
		display: flex;
		align-items: center;
		.name {
			font-size: 24rpx;
			margin-left: 20rpx;
			color: #444;
		}

		.des {
			margin: 10rpx 0px;
			font-size: 24rpx;
			color: #999;
		}
	}

	.InviteLogs-item-right {
		color: #999;
		font-size: 13px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}

.add {
	color: #07c160;
}

.reduction {
	color: #e43927;
}
</style>
